<template>
  <div>
    <header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </header>
    <main>
      <div class="title">
        <el-button type="primary" @click="addRole">添加角色</el-button>
      </div>
      <el-table :data="roleList" stripe border style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="demo-table-expand">
              <div
                v-for="(tag, index1) in scope.row.children"
                :key="tag.id"
                class="tag1"
              >
                <div class="left">
                  <el-tag
                    closable
                    type=""
                    @close="
                      removeRightById({
                        id: tag.id,
                        userId: scope.row.id,

                        level: 1,
                        index: scope.$index,
                      })
                    "
                  >
                    {{ tag.authName }}
                  </el-tag>
                  <i class="el-icon-caret-right"></i>
                </div>
                <div class="right">
                  <div
                    v-for="(tag2, index2) in tag.children"
                    :key="tag2.id"
                    class="tag2"
                  >
                    <div class="left">
                      <el-tag
                        closable
                        type="success"
                        @close="
                          removeRightById({
                            id: tag2.id,
                            userId: scope.row.id,
                            level: 2,
                            index: scope.$index,
                            index2: index1,
                          })
                        "
                      >
                        {{ tag2.authName }}
                      </el-tag>
                      <i class="el-icon-caret-right"></i>
                    </div>
                    <div>
                      <el-tag
                        closable
                        type="warning"
                        v-for="tag3 in tag2.children"
                        :key="tag3.id"
                        @close="
                          removeRightById({
                            id: tag3.id,
                            userId: scope.row.id,
                            level: 3,
                            index: scope.$index,
                            index2: index1,
                            index3: index2,
                          })
                        "
                      >
                        {{ tag3.authName }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="$message.warning('不让编辑,没给接口')"
            >
              编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="$message.error('删不了,不给删')"
              >删除</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-setting"
              @click="changeRole(scope.row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </main>

    <el-dialog title="分配权限" :visible.sync="dialogFormVisible">
      <el-tree
        :data="roleTree"
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultList"
        default-expand-all
        :props="defaultProps"
        ref="tree"
      >
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRoles,
  deleteRoles,
  getRolesTree,
  setRolesPoint,
} from "@/api/roles";
export default {
  name: "ShopRoles",
  data() {
    return {
      roleList: [],
      treeFlag: false,
      dialogFormVisible: false,

      roleTree: [],
      defaultProps: {
        children: "children",
        label: "authName",
      },
      defaultList: [],
      userId: "",
    };
  },
  created() {
    this.getRole();
  },
  methods: {
    async getRole() {
      const res = await getRoles();
      // console.log(res.data.data, 8989);
      this.roleList = res.data.data;
      console.log(this.roleList);
    },
    async removeRightById(data) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteRoles({
            roleId: parseInt(data.userId),
            perId: data.id,
          });
          if (res.data.meta.status == 200) {
            let list = this.roleList.filter((item) => item.id == data.userId);
            if (data.level == 1) {
              list = list[0].children.filter((item) => item.id != data.id);
              this.roleList[data.index].children = list;
            } else if (data.level == 2) {
              list = list[0].children[data.index2].children.filter(
                (item) => item.id != data.id
              );
              this.roleList[data.index].children[data.index2].children = list;
            } else if (data.level == 3) {
              list = list[0].children[data.index2].children[
                data.index3
              ].children.filter((item) => item.id != data.id);
              this.roleList[data.index].children[data.index2].children[
                data.index3
              ].children = list;
            }
            this.$message.success(res.data.meta.msg);
            // this.getRole();
          } else {
            this.$message.error("删除权限失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async confirm() {
      //console.log(111);
      const list = this.$refs.tree.getCheckedKeys();
      const list2 = this.$refs.tree.getHalfCheckedKeys();
      //console.log(...list, ...list2);
      const ridsList = [...list, ...list2];
      const res = await setRolesPoint({
        id: this.userId,
        rids: ridsList.join(","),
      });
      if (res.data.meta.status == 200) {
        this.$message.success(res.data.meta.msg);
        this.getRole();
        this.dialogFormVisible = false;
      } else {
        this.$message.error(res.data.meta.msg);
      }
    },
    async changeRole(row) {
      //console.log(row)
      this.userId = row.id;
      const res = await getRolesTree();
      //console.log(res.data.data);
      this.roleTree = res.data.data;
      const arr = row.children.map((item) => {
        return item.children.map((item2) => {
          return item2.children.map((item3) => {
            return item3.id;
          });
        });
      });
      const arr2 = JSON.stringify(arr)
        .replace(/(\[|\])/g, "")
        .split(",");
      //       console.log(arr2);
      this.defaultList = arr2;
      this.dialogFormVisible = true;
    },
    addRole() {
      this.$message.warning("让后端去做一个接口去");
    },
  },
};
</script>
<style lang='less'  scoped>
main {
  width: 100%;
  background-color: #fff;
  margin-top: 15px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 10px #ccc;
  .title {
    display: flex;
    margin-bottom: 20px;
    .el-input {
      width: 500px;
      margin-right: 20px;
    }
  }
}
.el-tag {
  margin: 0 10px;
}
.tag1 {
  padding: 5px;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  margin: 10px 0;
  align-items: center;
  .left {
    margin-right: 100px;
  }
  .tag2 {
    display: flex;
    margin: 10px 0;
    .left {
      margin-right: 100px;
    }
  }
}
</style>
